<template>
    <el-dialog title="选择位置" :visible.sync="visible"
               :before-close="()=> { visible = false }"
               destroy-on-close
               append-to-body>
        <el-row style="margin-bottom: 15px;" :gutter="20">
            <el-col :span="12">
                <div class="flex">
                    <el-input v-model="searchKeyword" placeholder="请输入关键词搜索" clearable></el-input>
                    <el-button type="success" @click="filterAddressMethod" style="margin-left: 10px;">搜索</el-button>
                </div>
            </el-col>
            <el-col :span="12">
                <el-select v-model="searchAddress" placeholder="请输入关键词搜索" style="width: 100%;" v-if="searchKeyword"
                           @change="onChangeAddressKeyword">
                    <el-option v-for="(el, idx) in addressList" :key="idx"
                               :value="el.location.lat+'--' + el.location.lng + '--' + el.address"
                               :label="el.title"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <div id="mpContainer" style="width:100%; height: 60vh;"></div>
    </el-dialog>
</template>
<script>
import {TMap} from '@/utils/TMap'

export default {
    data() {
        return {
            visible: false,
            cache: {},
            map: null,
            qq: null,
            infoWin: null,
            markersArray: [],
            searchKeyword: '',
            searchAddress: '',
            addressList: []
        }
    },
    methods: {
        handleMap(row) {
            this.visible = true
            row.latitude = row.latitude || 38.043118726230794
            row.longitude = row.longitude || 114.54869270324707
            this.initMap(row.latitude, row.longitude, row.address)
        },
        // 初始化地图
        initMap(lat, lng, address) {
            let that = this;
            let key = 'TNVBZ-LXCC3-COB32-O4XES-DHTSE-MCFJX'
            TMap(key).then(qq => {
                that.qq = qq
                let position = new qq.maps.LatLng(lat, lng)
                let map = new qq.maps.Map(document.getElementById("mpContainer"), {
                    // 地图的中心地理坐标。
                    center: position,
                    zoom: 15
                });
                that.map = map;
                let mapMarker = new qq.maps.Marker({
                    map: map,
                    position,
                })
                let infoWin = new qq.maps.InfoWindow({
                    map: map
                });
                that.infoWin = infoWin
                qq.maps.event.addListener(map, 'click', function (event) {
                    that.markersArray.forEach(el => {
                        el.setMap(null)
                    })
                    let lat = event.latLng.getLat();
                    let lng = event.latLng.getLng();
                    let qyparams = {
                        latitude: lat,
                        longitude: lng,
                    }
                    let position = new qq.maps.LatLng(lat, lng)
                    let mapMarker = new qq.maps.Marker({
                        map: map,
                        position
                    })
                    that.makerClick(qq, infoWin, mapMarker, address)
                    that.request.get("/admin/ajax/location", {params: qyparams}).then(response => {
                        that.$emit('ok', {
                            latitude: mapMarker.position.lat,
                            longitude: mapMarker.position.lng,
                            address: response.data.address || '',
                            province: response.data.province || '',
                            province_id: response.data.province_id || '',
                            city: response.data.city || '',
                            city_id: response.data.city_id || '',
                            district: response.data.district || '',
                            district_id: response.data.district_id || '',
                        })
                        that.visible = false
                    })
                });
                that.makerClick(qq, infoWin, mapMarker, address)
            });
        },
        makerClick(qq, infoWin, mapMarker, address) {
            this.markersArray.push(mapMarker)
            qq.maps.event.addListener(mapMarker, 'click', function (event) {
                infoWin.open();
                infoWin.setContent('<div style="text-align:center;white-space:' +
                    'nowrap;margin:10px;"> ' + address + ' </div>');
                //提示窗位置
                infoWin.setPosition(position);
            })
        },
        onChangeAddressKeyword() {
            this.markersArray.forEach(el => {
                el.setMap(null)
            })
            let arr = this.searchAddress.split("--")
            let that = this
            let position = new that.qq.maps.LatLng(arr[0], arr[1])
            this.map.setOffsetCenter(position)
            let mapMarker = new that.qq.maps.Marker({
                map: this.map,
                position,
            })
            that.makerClick(that.qq, that.infoWin, mapMarker, arr[2])
        },
        filterAddressMethod() {
            let qyparams = {
                keyword: this.searchKeyword
            }
            this.request.get("/admin/ajax/searchAddress", {params: qyparams}).then(response => {
                this.addressList = response.data || []
            })
        }
    }
}
</script>
